﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>弹窗测试页面</title>
    <link type="text/css" rel="stylesheet" href="../../src/css/component/jquery-ui/jquery.ui.all.css"/>
    <style type="text/css">
        /*CSS Reset*/
        body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-size: 12px;}
        table{border-collapse:collapse;border-spacing:0;}
        fieldset,img {border:0;}
        address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
        ol,ul {list-style:none;}
        capation,th{text-align:left;}
        h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
        q:before, q:after{content:' '}
        abbr,acronym{border:0;}
        body {
            background-color: green;
        }
        .main {
            margin: 100px auto;
            width: 800px;
            height: 1500px;
        }
        .main-test-alert {
             float: left;
             margin-left: 10px;
             padding-top: 30px;
             width: 100px;
             height: 68px;
             border: 1px solid white;
             background-color: red;
             color: #fff;
             text-align: center;
             cursor: pointer;
        }
        .main-test-dialog1 {
             float: left;
             margin-left: 50px;
             padding-top: 30px;
             width: 100px;
             height: 68px;
             border: 1px solid white;
             background-color: red;
             color: #fff;
             text-align: center;
             cursor: pointer;
        }
        .main-test-dialog2 {
             float: left;
             margin-left: 50px;
             padding-top: 30px;
             width: 100px;
             height: 68px;
             border: 1px solid white;
             background-color: red;
             color: #fff;
             text-align: center;
             cursor: pointer;
        }
        
        .main-test-confirm {
             float: left;
             margin-left: 50px;
             padding-top: 30px;
             width: 100px;
             height: 68px;
             border: 1px solid white;
             background-color: red;
             color: #fff;
             text-align: center;
             cursor: pointer;
        }
        
    </style>
    <script type="text/javascript" src="../../dep/require-2.1.11.js"></script>
</head>
<body>
    <div class="main">
        <div class="main-test-alert">
                        测试alert<br/>(点击我哦)
        </div>
        <div class="main-test-dialog1">
                       测试dialog1<br/>(点击我哦)
        </div>
        <div class="main-test-dialog2">
                       测试dialog2<br/>(点击我哦)
        </div>
         <div class="main-test-confirm">
                       测试confirm<br/>(点击我哦)
        </div>
    </div>
 <script type="text/javascript">
      require.config({
            baseUrl: '../../src/',  //本地模拟为src，线上版问asset
            paths: {
                jquery: '../dep/jquery-1.11.1',
                jqueryui: '../dep/jquery-ui.custom-1.10.4',
                dialog: 'core/dialog'
            },
            shim: {
                'jqueryui': {
                    deps: [
                        'jquery'
                    ]
                }
            }
        });
        
        require(['jqueryui'], function () {
            require(['dialog'], function (Dialog) {
                 var alert = Dialog.alert;
                 var showDialog = Dialog.showDialog;
                 var confirm = Dialog.confirm;
                 
                 var html = [
                     '<div style="width:500px;height:300px;background-color:Red;"></div>'
                 ].join('');
        
                
                $('.main-test-alert').click(function () {
                    alert('更新成功更新成功更新成功更新成功更新成功更新成功');
    
                });
    
                $('.main-test-dialog1').click(function () {
                   var oDiag = showDialog({
                       dialog: {
                            height: 300,
                            width: 300,
                            buttons: {
                                "提交": function () {
                                   alert();
                                   $(this).dialog('close');
                                },
                                '取消': function () {
                                   alert();
                                   oDiag.dialog('close');
                                }
                            }
                        },
                       content: html,
                       title: '你好'
                    });
                });
                
                $('.main-test-dialog2').click(function () {
                   var oDiag = showDialog({
                       dialog: {
                            buttons: {
                                "提交": function () {
                                   alert();
                                   $(this).dialog('close');
                                },
                                '取消': function () {
                                   alert();
                                   oDiag.dialog('close');
                                }
                            },
                        }
                    });
                });
                
                 $('.main-test-confirm').click(function () {
                    confirm('您确定取消吗', function () {
                        alert('好吧，既然这样，那就取消吧！');
                    });
                });
            });
           
        });
        
    </script>
</body>
</html>
